<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>display属性展示</title>
    <style>
        body {
            background: aliceblue;
            font: 18px/1.2 'Trebuchet MS';
        }

        button {
            border-radius: 5px;
            height: 30px;
        }

        div {
            margin: 20px;
        }

        li>div {
            border: 1px solid yellow;
            border-radius: 5px;
            width: 600px;
            height: 60px;
            padding: 10px;
            background: antiquewhite;
        }
        .Block {
            display: block;
        }

        .Inline {
            display: inline;
        }

        .None {
            display: none;
        }

        span {
            display: list-item;
        }

        button:hover {
            color: blue;
            transform: rotate(3deg);
        }

        table {
            display: table;
            border-collapse: collapse;
        }

        tr {
            display: table-row;
            border: 1px solid;
            border-left: 1px solid black;
            padding: 5px;
        }

        thead {
            display: table-header-group
        }

        tbody {
            display: table-row-group
        }

        tfoot {
            display: table-footer-group
        }

        col {
            display: table-column
        }

        colgroup {
            display: table-column-group
        }

        td,
        th {
            display: table-cell;
            border: 1px solid;
            border-left: 1px solid black;
            padding: 5px;
        }

        caption {
            display: table-caption
        }
    </style>

<body>
<h1 style="text-align: center;">display属性展示</h1>
<div>
    <ol>
        <li>
            <p>block:此元素将显示为块级元素，此元素前后会带有换行符。
                <br />inline:此元素会被显示为内联元素，元素前后没有换行符。</p>
            <div>
                <button id="id1" class="Block" onclick="IntoInline()">点我换成inline</button>
                默认设为block，我的位置能看出block和inline的区别
            </div>
        </li>
        <li>
            <p>none:此元素不会被显示</p>
            <div>
                <button id="id2" class="Block" onclick="IntoNone()">不要点我，我会消失T_T</button>
                <br />
            </div>
        </li>
        <li>
            <p>list-item:此元素会作为列表显示</p>
            <div style="height: 130px;">
                <ul>
                    <li>
                        <p><span>这本来是一段连在一起的文字，</span>但是<span>display的值被设置为了list-item之后，</span>就变成了如同li一样的列表</p>
                    </li>
                </ul>
            </div>
        </li>
        <li>
            <p>其他的属性值展示如下</p>
            <div style="height: 180px;">
                <table>
                    <thead>
                    <tr>
                        <th colspan="2">你看这是应用display属性的thead中的th标签，做了一个怪物生日表，有区别吗</th>
                    </tr>
                    <tr>
                        <th>怪物名称</th>
                        <th>出生年月</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>King Kong</td>
                        <td>1933</td>
                    </tr>

                    <tr>
                        <td>Dracula</td>
                        <td>1897</td>
                    </tr>

                    <tr>
                        <td>Bride of Frankenstein</td>
                        <td>1944</td>
                    </tr>
                    </tbody>
                </table>
            </div>

        </li>
    </ol>
</div>
</body>
<script>
    function IntoInline() {
        var o = document.getElementById("id1");
        o.setAttribute("class", "Inline");
    }

    function IntoNone() {
        var o = document.getElementById("id2");
        o.setAttribute("class", "None");
    }
</script>

</html>